<template>
  <view class="app" :class="[cusClass]" :style="[cusStyle]">
    <slot name="header"></slot>
    <slot v-if="!login || loginState"></slot>
    <view v-else-if="isLoginLoading" class="loading-view" :style="loginViewStyle">
      <mxp-page-loading text="登录中"></mxp-page-loading>
    </view>
    <mxp-toast ref="mxpToastRef" :customNav="customNav"></mxp-toast>
  </view>
</template>

<script lang="ts" setup>
  import MxpToast from '@/mxp-ui/mxp-toast/mxp-toast.vue';
  import MxpPageLoading from '@/mxp-ui/mxp-page-loading/mxp-page-loading.vue';
  import { useAppStore } from '@/pinia/app';
  import { type CSSProperties, type PropType, computed, nextTick, onMounted, ref, watch } from 'vue';
  import type { $SizeUnitStr } from '@/mxp-ui/mxp-tool/types/interface';
  import { mxpGetSysInfoStore } from '@/mxp-ui/mxp-tool/store/mxp-store-sys-info';

  defineOptions({
    name: 'app-page',
  });
  const props = defineProps({
    /** 宽度 */
    width: { type: String as PropType<$SizeUnitStr>, default: undefined },
    /**高度 */
    height: { type: String as PropType<$SizeUnitStr>, default: undefined },
    /** 是否需要登录 */
    login: { type: Boolean, default: true },
    /** 是否为自定义导航栏 */
    customNav: { type: Boolean, default: false },
    /** 自定义的样式属性 */
    cusStyle: { type: Object as PropType<CSSProperties>, default: () => ({}) },
    /** 自定义类名 */
    cusClass: { type: String, default: '' },
  });
  defineSlots<{
    /** 头部 */
    header: () => void;
    /** 主体内容 */
    default: () => void;
  }>();
  const sys = mxpGetSysInfoStore().getSysInfo();
  console.log('sys============>', sys);
  const mxpToastRef = ref<InstanceType<typeof MxpToast> | null>(null);
  const appStore = useAppStore();

  const loginState = computed(() => appStore.loginState);
  const isLoginLoading = computed(() => appStore.isLoginLoading);
  const loginViewStyle = computed<CSSProperties>(() => {
    return {
      width: props.width || `${sys.value.windowWidth}px`,
      height: props.height || `${sys.value.windowHeight - (props.customNav ? sys.value.statusBarHeight! + 44 : 0)}px`,
    };
  });
  watch(
    () => loginState.value,
    (state) => {
      nextTick(() => {
        if (!isLoginLoading.value && !state && props.login) {
          const page = getCurrentPages();
          // 登录成功后，跳转到登录前的页面 (只有当当前和上一个路由都不为登录页面才返回，否则就跳转到首页)
          if (page[page.length - 1]?.route?.indexOf('pages/account/login/login') !== 0) {
            uni.reLaunch({ url: '/pages/account/login/login' });
          }
        }
      });
    }
  );
  onMounted(() => {
    appStore.setMxpToastRef(mxpToastRef.value);

    if (!loginState.value && props.login) {
      uni.navigateTo({ url: '/pages/account/login/login' });
    }
  });
</script>

<style scoped lang="scss">
  .app {
    display: flex;
    flex-direction: column;

    .loading-view {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
</style>
